/* 通用头部 */
Vue.component('zb-head', {
  template: `
    <div class="common-head-container clearfix" id="zbHeaderBox">
      <div class="head-wrapper">
        <div class="w1200">
          <div class="left fl">
            <div class="sp1">航空院校招生 <span class="sp2">初/高中生均可报名</span></div>
            <span class="sp3">欢迎访问航空招生平台！</span>
          </div>
          <div class="right fr">400-823-0180</div>
        </div>
      </div>
      <div class="menu-wrapper" id="hideShow"></div>
      <div class="menu-wrapper" id="zbHeader">
        <div class="w1200">
          <a href="index.html" class="icon fl" :class="{ school: mode === 2 }"><img :src="logo" alt=""></a>
          <div class="menu-list fr">
            <template v-if="mode === 2">
              <div v-for="(item,index) in schoolMenu" :key="index" class="menu-item" >
                <a>{{item.name}}</a>
                <div class="popup-container" :class="'popup-' + index">
                  <div class="main-bt">{{item.name}}</div>
                  <div class="main-content">
                    <div class="main-wrapper" v-html="item.content"></div>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div v-for="(item,index) in menu" :key="index" class="menu-item" :class="{ active: url === item.url }" >
                <a :href="item.url" @click="skipPage(item)" class="nav-item">{{item.name}} <b v-if="item.list"></b></a>
                <template v-if="item.list">
                  <div class="sub">
                    <dl>
                      <dt v-for="(items,j) in item.list" :key="j"><a :href="items.url" @click="skipPage(item)">{{items.name}}</a></dt>
                    </dl>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  `,
  props: {
    // 1-通用；2-学校详情
    mode: {
      type: Number,
      default: 1
    },
    url: {
      type: String,
      default: 'index.html'
    },
    back: {
      type: Boolean,
      default: true
    },
    logo: {
      type: String,
      default: './assets/images/newhome/logo.png'
    },
    schoolMenu: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      menu: [
        { name: '首页', url: 'index.html'},
        {
          name: '初高中生专区', url: 'highSchool.html', 
          list:[
            {name:'三二连读', url:''},
            {name:'5年一贯制', url:''},
            {name:'1+3专科', url:''},
            {name:'1+4本科', url:''},
            {name:'在线报名', url:''},
          ]
        },
        {
          name: '艺术生专区', url: 'highSchool.html', 
          list:[
            {name:'艺考院校', url:''},
            {name:'艺考解答', url:''},
            {name:'艺考备考', url:''},
            {name:'艺考须知', url:''},
            {name:'艺考招生', url:''}
          ]
        },
        {
          name: '航空单招', url: 'highSchool.html', 
          list:[
            {name:'招生政策', url:''},
            {name:'招生简章', url:''},
            {name:'报名流程', url:''},
            {name:'往年考题', url:''},
            {name:'志愿填报', url:''}
          ]
        },
        {
          name: '热门专业', url: 'highSchool.html', 
          list:[
            {name:'空乘专业', url:''},
            {name:'VIP地勤', url:''},
            {name:'高铁专业', url:''},
            {name:'邮轮海乘', url:''},
            {name:'机务维修', url:''},
            {name:'飞行员', url:''}
          ]
        },
        { name: '航校联盟', url: ''},
      ]
    }
  },
  mounted(){
    const header = document.getElementById("zbHeader");
    //获取header到页面顶部的高度
    const headerOffsetTop = header.offsetTop;
    const zbHeaderBox = document.getElementById("zbHeaderBox");
    //滚动监听
    window.onscroll = function () {
      //获取滚动高度
      const scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
      //如果滚动高度大于header到顶部的高度，就让header吸顶
      if (scrollHeight > headerOffsetTop) {
        zbHeaderBox.className = "common-head-container clearfix on"
      } else {
        zbHeaderBox.className = "common-head-container clearfix"
      }
    };
  },
  methods: {
    // 在线咨询
    getSub() {
      console.log('11111')
    }
  }
});
/* 通用标题组 */
Vue.component('zb-title', {
  template: `
    <div class="home-tit" :style="{ paddingTop: top + 'px', paddingBottom: bottom + 'px' }">
      <div class="le" v-html="title"></div>
      <div class="intro" v-html="intro"></div>
    </div>
  `,
  props: {
    title: String,
    intro: String,
    top: {
      type: String,
      default: '70'
    },
    bottom: {
      type: String,
      default: '50'
    },
  }
})

/* 底部表单 */
Vue.component('book-form', {
  template: `
    <div class="bookForm">
      <div class="con w1200">
        <div class="top">在线预约报名我校（*号为必填项目！）</div>
        <el-form label-width="100px" :model="bookForm" ref="bookForm" class="bookForm-form" :rules="rules">
          <div class="flex-bect">
            <el-form-item label="报名院校" prop="schoolId" class="w">
              <el-select v-model="bookForm.schoolId" placeholder="请选择" class="text1">
                <el-option v-for="(item,index) in schoolList" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业选择" prop="zhuanye" class="w">
              <el-select v-model="bookForm.zhuanye" placeholder="请选择" class="text2">
                <el-option v-for="(item,index) in zhuangyeList" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex-bect">
            <el-form-item label="学生姓名" prop="name" class="w">
              <el-input v-model="bookForm.name" placeholder="与身份证上一致" class="text1" />
            </el-form-item>
            <el-form-item label="学生性别" prop="sex" class="w">
              <div class="flex-bect">
                <el-radio v-model="bookForm.sex" label="1" class="radio">男</el-radio>
                <el-radio v-model="bookForm.sex" label="2" class="radio">女</el-radio>
              </div>
            </el-form-item>
          </div>
          
          <div class="flex-bect">
            <el-form-item label="联系方式" prop="mobile" class="w">
              <el-input placeholder="请填写11位手机号码" maxlength="11" v-model="bookForm.mobile" class="text1" />
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday" class="w">
              <el-date-picker class="text2"
                v-model="bookForm.birthday"
                value-format="yyyy-MM-dd"
                type="date"
                :clearable="false"
                placeholder=""
              />
            </el-form-item>
          </div>
          <div class="flex-bect">
            <el-form-item label="户籍省份" prop="domicile" class="w">
              <el-select v-model="bookForm.domicile" placeholder="请选择" class="text1">
                <el-option v-for="(item,index) in hujiList" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="微信/QQ" prop="qq" class="w">
              <el-input placeholder="填写微信QQ号码" class="text2" v-model="bookForm.qq" />
            </el-form-item>
          </div>
          <div class="flex-bect">
            <el-form-item label="身高体重" prop="hw" class="w">
              <el-input placeholder="如：身高165CM,体重：50KG" class="text1" v-model="bookForm.hw" />
            </el-form-item>
          </div>
          
          <el-form-item label="备注信息" prop="remark">
            <el-input type="textarea" placeholder="介绍您的基本情况" class="text3" v-model="bookForm.remark" />
          </el-form-item>
          <div class="flex-ct checked">
            <el-checkbox v-model="bookForm.checked" class="checked1"></el-checkbox>我已经阅读并理解<a href="" class="a" target="_blank">《隐私政策及授权使用协议》</a>的条款
          </div>
          <div class="flex-ct">
            <el-button type="primary" @click="submitForm('bookForm')" class="flex-ct submit">立即报名</el-button>
            <span @click="resetForm('bookForm')" class="reset"><i class="el-icon-refresh-left"></i>重置</span>
          </div>
        </el-form>
      </div>
    </div>
  `,
  data() {
    return {
      bookForm:{
        zhuanye:"", // 专业
        name:"", // 姓名
        schoolId:"", // 学校
        birthday:"", // 出生日期
        domicile:"", // 户籍
        mobile:'', // 手机号
        qq:"", // QQ号
        weight:"", // 体重
        remark:"", // 备注
        sex:"1", // 性别
        checked:false, // 同意
        hw:'', // 身高体重
      },
      
      rules: {
        name: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
        ],
        hw: [
          { required: true, message: '请输入身高体重', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
            //校验手机号的正则：/^1[3456789]\d{9}$/
          {
            pattern:/^1[23456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        birthday: [
          { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
        ]
      },
      schoolList: [
        { id: 1, name: '安徽大学' },
        { id: 2, name: '合肥工业大学' },
        { id: 3, name: '中国科学技术大学' },
      ],
      hujiList: [
        { id: 1, name: '安徽' },
        { id: 2, name: '北京' },
        { id: 3, name: '江苏' },
      ],
      zhuangyeList:[
        { id: 1, name: '空少/空姐/空乘' },
        { id: 2, name: 'VIP地勤人员' },
        { id: 3, name: '艺术类工作者' },
      ],
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
  }
})


/* 通用底部 */
Vue.component('zb-foot', {
  template: `
    <div id="footer">
      <div class="box">
        <div class="w1200 flex-bect">
          <div class="w1">
            <div class="flex-lect">
              <a v-for="(item, index) in footer" :href="item.url" class="item"><img :src="item.img" alt="" class="ico"><div class="p">{{item.name}}</div></a>
            </div>
            <div class="ft-ph">{{footerPhone}}</div>
          </div>
          <div class="wx">
            <img :src="ftwx" alt="" class="img">
            <div><p class="p">扫一扫</p>咨询老师</div>
          </div>
        </div>
      </div>
      <div class="copy">版权所有：北京智途教育有限公司</div>
    </div>
  `,
  data() {
    return {
      footerPhone:"400-8230180",
      ftwx:"./assets/images/newhome/ewm.png",
      footer:[
        {name:'网站首页', url:'', img:'./assets/images/newhome/ft-ico1.png'},
        {name:'院校大全', url:'', img:'./assets/images/newhome/ft-ico2.png'},
        {name:'报名申请', url:'', img:'./assets/images/newhome/ft-ico3.png'},
        {name:'合作推广', url:'', img:'./assets/images/newhome/ft-ico4.png'},
        {name:'关于我们', url:'', img:'./assets/images/newhome/ft-ico5.png'},
        {name:'联系我们', url:'', img:'./assets/images/newhome/ft-ico6.png'}
      ],
    }
  },
  methods: {
    onlineService() {
      onlineService()
    }
  }
})


/* 通用侧边栏 */
Vue.component('zb-slider', {
  template: `
    <div>
      <div v-if="left" class="slider-nav-wrapper">
        <img src="./assets/images/icon/slider-top-bg.png" alt="" class="top-bg">
        <div class="slider-list">
          <a v-for="(item,index) in menu" :key="index" :href="item.url" class="item">{{item.name}}</a>
        </div>
        <img src="./assets/images/icon/slider-bottom-bg.png" alt="" class="bottom-bg">
      </div>
      <div v-if="right" class="slider-service-wrapper">
        <img @click="onlineService" style="cursor:pointer" src="./assets/images/icon/service-icon.png" alt="" class="icon">
        <div @click="onlineService" style="cursor:pointer" class="title">
          连线
          <span>职教老师</span>
        </div>
        <div class="list">
          <div v-for="(item, index) in services" :key="index" class="item">
            <div class="label">{{item.name}}</div>
            <a class="btn" :href="item.url" target="_blank">在线</a>
          </div>
        </div>
        <img src="./assets/images/icon/service-code.png" alt="" class="code">
        <div class="introduce">扫一扫 加老师</div>
        <div class="phone">400-8230-180</div>
      </div>
    </div>
  `,
  props: {
    // 是否展示左侧边栏
    left: {
      type: Boolean,
      default: true
    },
    // 是否展示右侧边栏
    right: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      menu: [
        { name: '工业机器人', url: 'rebotMajor.html' },
        { name: '护理专业', url: 'hospitalMajor.html' },
        { name: '艺术专业', url: 'artsMajor.html' },
        { name: '学前教育', url: 'preschoolMajor.html' },
        { name: 'IT/互联网', url: 'computerMajor.html' },
        { name: '影视编导', url: 'movieMajor.html' }
      ],
      services: [
        { name: '报名条件', url: '' },
        { name: '报名时间', url: '' },
        { name: '报名流程', url: '' },
        { name: '就业推荐', url: '' },
        { name: '学习方案', url: '' },
        { name: '院校介绍', url: '' },
        { name: '最新动态', url: '' },
        { name: '面试资格', url: '' },
      ]
    }
  },
  methods: {
    onlineService() {
      onlineService()
    }
  }
})



/* 热招院校 */
Vue.component('hotly-university', {
  template: `
    <div class="hotly-enrolled-university">
      <zb-title title="热招院校" top="76" bottom="44">海量问答，大咖讲师，专业解答</zb-title>
      <div class="screen-box w1200">
        <div class="title">专业类别：</div>
        <ul class="screen-children">
          <li 
            v-for="(item, index) in majorCategoryList" 
            :key="index" 
            class="category-item" 
            :class="{ active: payload.majorId === item.id }"
            @click="updateMajor(item.id)"
          >
            {{item.name}}
          </li>
        </ul>
        <div class="title">学校地区：</div>
        <ul class="screen-children">
          <li 
            v-for="(item, index) in schoolRegionList" 
            :key="index" 
            class="region-item" 
            :class="{ active: payload.regionId === item.id }"
            @click="updateRegion(item.id)"
          >
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="school-list w1200" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.2)">
        <div v-for="(item,index) in schoolData" :key="index" class="item">
          <div class="info-box">
            <div class="photo">
              <img :src="item.icon" alt="">
            </div>
            <div class="infos">
              <div class="name">{{item.name}}</div>
              <div class="info">地址：{{item.address}}</div>
              <div class="info">优势：{{item.advantage}}</div>
            </div>
          </div>
          <div class="btn-box">
            <a :href="'schoolDetail.html?id=' + item.id">学校详情</a>
            <a href="">快速报名</a>
          </div>
        </div>
        <div class="clear"></div>
        <div v-if="schoolData.length === 0" class="empty-box">
          <img src="./assets/images/index/empty.png" alt="" class="icon">
          <div class="title">这里空空如也~~</div>
          <div class="prompt">
            <span>换个关键词试试</span>
            <div class="btn">北京</div>
            <div class="btn">湖北</div>
            <div class="btn">上海</div>
          </div>
          <div class="prompt">搜索结果不满意？ <a href="contact.html">联系我们</a>你想要去的学校</div>
        </div>
        <div v-else class="pagination-box">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  `,
  data() {
    return {
      pageNum: 1,
      // 单页展示数据条数
      pageSize: 9,
      // 数据总长度
      total: 0,
      payload: {
        majorId: 1,
        regionId: 1,
      },
      loading: false,
      schoolData: [],
      // 专业类别
      majorCategoryList: [
        { id: 1, name: '学前教育' },
        { id: 2, name: '工商管理' },
        { id: 3, name: '医院护理' },
        { id: 4, name: '工业机器人' },
        { id: 5, name: '经济管理' },
        { id: 6, name: 'IT/计算机' },
        { id: 7, name: '软件工程' },
        { id: 8, name: '影视专业' },
        { id: 9, name: '艺术类' },
        { id: 10, name: '会计专业' },
        { id: 11, name: '语言法律' },
        { id: 12, name: '机械工程' },
        { id: 13, name: '教育理学' },
        { id: 14, name: '互联网金融' },
      ],
      // 学校地区
      schoolRegionList: [
        { id: 1, name: '北京' },
        { id: 2, name: '天津' },
        { id: 3, name: '河北' },
        { id: 4, name: '山西' },
        { id: 5, name: '内蒙古' },
        { id: 6, name: '辽宁' },
        { id: 7, name: '吉林' },
        { id: 8, name: '黑龙江' },
        { id: 9, name: '上海' },
        { id: 10, name: '江苏' },
        { id: 11, name: '浙江' },
        { id: 12, name: '安徽' },
        { id: 13, name: '福建' },
        { id: 14, name: '江西' },
        { id: 15, name: '山东' },
        { id: 16, name: '河南' },
        { id: 17, name: '湖北' },
        { id: 18, name: '湖南' },
        { id: 19, name: '广东' },
        { id: 20, name: '广西' },
        { id: 21, name: '海南' },
        { id: 22, name: '重庆' },
        { id: 23, name: '四川' },
        { id: 24, name: '贵州' },
        { id: 25, name: '云南' },
        { id: 26, name: '西藏' },
        { id: 27, name: '陕西' },
      ],
    }
  },
  methods: {
    // 切换分页
    pageChange(pageNum) {
      this.pageNum = pageNum
      this.loadRes()
    },
    // 查询数据
    loadRes() {
      if (this.loading) return
      // 模拟请求数据
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.schoolData = [
          {
            id: 1,
            icon: './assets/images/school/icon-1.png',
            name: '哈尔滨工程大学继续教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          },
          {
            id: 2,
            icon: './assets/images/school/icon-2.png',
            name: '辽宁师范大学海华学院现代产业学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }, 
          {
            id: 3,
            icon: './assets/images/school/icon-3.png',
            name: '山东交通学院继续教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }, 
          {
            id: 4,
            icon: './assets/images/school/icon-4.png',
            name: '浙江海洋大学继续教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }, 
          {
            id: 5,
            icon: './assets/images/school/icon-5.png',
            name: '湘潭大学继续教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }, 
          {
            id: 6,
            icon: './assets/images/school/icon-6.png',
            name: '福建工程学院职业教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }, 
          {
            id: 7,
            icon: './assets/images/school/icon-7.png',
            name: '南京工业大学继续教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }, 
          {
            id: 8,
            icon: './assets/images/school/icon-8.png',
            name: '郑州科技学院继续教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }, 
          {
            id: 9,
            icon: './assets/images/school/icon-9.png',
            name: '燕山大学继续教育学院',
            address: '黑龙江省哈尔滨市',
            advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
          }
        ]
        this.total = 27
      }, 1000)
    },
    // 切换专业类别
    updateMajor(majorId) {
      if (this.payload.majorId !== majorId) {
        this.payload.majorId = majorId
        this.pageNum = 1
        this.loadRes()
      }
    },
    // 切换地区
    updateRegion(regionId) {
      if (this.payload.regionId !== regionId) {
        this.payload.regionId = regionId
        this.pageNum = 1
        this.loadRes()
      }
    }
  },
  mounted() {
    this.loadRes()
  }
})

/* 申请报名 */
Vue.component('apply-registration', {
  template: `
    <div class="apply-registration-module" :style="{ backgroundImage: url ? 'url(' + url + ')' : 'none' }">
      <zb-title top="90" bottom="57">
        <span slot="title" :style="{ color }">{{title || '申请报名'}}</span>
        <span :style="{ color }">{{subTitle || '海量问答，大咖讲师，专业解答'}}</span>
      </zb-title>
      <div class="w1200 form-wrapper">
        <div class="title">
          <div class="line"></div>
          <span>填写申请信息</span>
        </div>
        <div class="extra">请您填写真实有效的信息，以便我们为您留下宝贵的入学名额，带 * 为必填项</div>
        <div class="form">
          <el-form ref="myForm" :model="payload" :rules="rules" size="medium">
            <el-row :gutter="86">
              <el-col :span="12">
                <el-form-item label="报名院校" prop="schoolName">
                  <el-select v-model.trim="payload.schoolName" style="width:100%;" allow-create placeholder="可选择也可输入">
                    <el-option v-for="(item,index) in schoolList" :key="index" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业选择" prop="majorName">
                  <el-select v-model.trim="payload.majorName" style="width:100%;" allow-create placeholder="可选择也可输入">
                    <el-option v-for="(item,index) in majorList" :key="index" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item label="学生姓名" prop="studentName">
                  <el-input v-model.trim="payload.studentName" placeholder="与身份证上一致"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="mobile">
                  <el-input v-model.trim="payload.mobile" placeholder="填写11位手机号码"></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item label="出生年月" prop="birthDay">
                  <el-date-picker
                    v-model="payload.birthDay"
                    style="width:100%;"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :clearable="false"
                    placeholder="请选择出生 年/月/日"
                  />
                </el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item label="户籍省市" prop="region">
                  <el-select v-model="payload.region" style="width:100%;" placeholder="请选择">
                    <el-option v-for="(item,index) in regionList" :key="index" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model.trim="payload.phone" placeholder=""></el-input>
                </el-form-item> 
              </el-col>
              <el-col :span="12">
                <el-form-item label="学生性别" prop="sex">
                  <div class="el-input" style="width:100%;">
                    <span class="placeholder">请选择：</span>
                    <el-radio-group v-model="payload.sex">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item> 
              </el-col>
            </el-row>
            <el-form-item label="留言/备注" prop="remark">
              <el-input v-model.trim="payload.remark" type="textarea" rows="3" placeholder="您可填写留言" resize="none"></el-input>
            </el-form-item>
            <div class="aggress-box">
              <el-checkbox v-model="checkbox"></el-checkbox>
              <span>我已经阅读并理解<a href="">《隐私政策及授权使用协议》</a>的条款</span>
            </div>
            <div class="btn-box">
              <el-button type="primary" plain size="medium" round @click="reset">重新填写</el-button>
              <el-button type="primary" size="medium" round @click="confirm">立即报名</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  `,
  props: {
    title: String,
    subTitle: String,
    url: String,
    color: String
  },
  data() {
    return {
      payload: {
        schoolName: '',
        majorName: '',
        studentName: '',
        mobile: '',
        birthDay: '',
        region: '',
        phone: '',
        sex: 1,
      },
      checkbox: false,
      rules: {
        schoolName: [
          { required: true, message: '请选择报名院校' }
        ],
        majorName: [
          { required: true, message: '请选择专业' }
        ],
        studentName: [
          { required: true, message: '请输入学生姓名' }
        ],
        mobile: [
          { required: true, message: '请输入联系方式' },
          { pattern: commonRegulars.mobile, message: '请输入正确的联系方式' },
        ],
        birthDay: [
          { required: true, message: '请选择出生年月' }
        ],
        region: [
          { required: true, message: '请选择户籍省市' }
        ],
        phone: [
          { required: true, message: '请输入手机号码' },
          { pattern: commonRegulars.mobile, message: '请输入正确的手机号码' },
        ],
      },
      // 报名院校列表
      schoolList: [
        {
          id: 1,
          icon: './assets/images/school/icon-1.png',
          name: '哈尔滨工程大学继续教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        },
        {
          id: 2,
          icon: './assets/images/school/icon-2.png',
          name: '辽宁师范大学海华学院现代产业学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }, 
        {
          id: 3,
          icon: './assets/images/school/icon-3.png',
          name: '山东交通学院继续教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }, 
        {
          id: 4,
          icon: './assets/images/school/icon-4.png',
          name: '浙江海洋大学继续教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }, 
        {
          id: 5,
          icon: './assets/images/school/icon-5.png',
          name: '湘潭大学继续教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }, 
        {
          id: 6,
          icon: './assets/images/school/icon-6.png',
          name: '福建工程学院职业教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }, 
        {
          id: 7,
          icon: './assets/images/school/icon-7.png',
          name: '南京工业大学继续教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }, 
        {
          id: 8,
          icon: './assets/images/school/icon-8.png',
          name: '郑州科技学院继续教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }, 
        {
          id: 9,
          icon: './assets/images/school/icon-9.png',
          name: '燕山大学继续教育学院',
          address: '黑龙江省哈尔滨市',
          advantage: '“211工程”建设高校订单培养学生入学签订就业推荐协议'
        }
      ],
      // 专业列表
      majorList: [
        { id: 1, name: '学前教育' },
        { id: 2, name: '工商管理' },
        { id: 3, name: '医院护理' },
        { id: 4, name: '工业机器人' },
        { id: 5, name: '经济管理' },
        { id: 6, name: 'IT/计算机' },
        { id: 7, name: '软件工程' },
        { id: 8, name: '影视专业' },
        { id: 9, name: '艺术类' },
        { id: 10, name: '会计专业' },
        { id: 11, name: '语言法律' },
        { id: 12, name: '机械工程' },
        { id: 13, name: '教育理学' },
        { id: 14, name: '互联网金融' },
      ],
      // 户籍省市
      regionList: [
        { id: 1, name: '北京' },
        { id: 2, name: '天津' },
        { id: 3, name: '河北' },
        { id: 4, name: '山西' },
        { id: 5, name: '内蒙古' },
        { id: 6, name: '辽宁' },
        { id: 7, name: '吉林' },
        { id: 8, name: '黑龙江' },
        { id: 9, name: '上海' },
        { id: 10, name: '江苏' },
        { id: 11, name: '浙江' },
        { id: 12, name: '安徽' },
        { id: 13, name: '福建' },
        { id: 14, name: '江西' },
        { id: 15, name: '山东' },
        { id: 16, name: '河南' },
        { id: 17, name: '湖北' },
        { id: 18, name: '湖南' },
        { id: 19, name: '广东' },
        { id: 20, name: '广西' },
        { id: 21, name: '海南' },
        { id: 22, name: '重庆' },
        { id: 23, name: '四川' },
        { id: 24, name: '贵州' },
        { id: 25, name: '云南' },
        { id: 26, name: '西藏' },
        { id: 27, name: '陕西' },
      ]
    }
  },
  methods: {
    reset() {
      this.$refs.myForm.resetFields()
    },
    confirm() {
      this.$refs.myForm.validate(valid => {
        if (valid) {
          if (!this.checkbox) {
            ELEMENT.Message.closeAll()
            ELEMENT.Message.error('请先勾选条款')
            return
          }
          console.log('提交数据 === ', this.payload)
        } else {
          return false
        }
      })
    }
  }
})


Vue.component('bottom-form', {
  template: `
    <div class="common-bottom-form" :style="{
      backgroundImage: 'url(' + url +')'
    }">
      <div class="bt">当你还在犹豫时 别人已经在默默提升的路上</div>
      <div class="sub">分秒必争，立即高效备战，快！</div>
      <el-row class="form" :gutter="20">
        <el-col :span="12">
          <input v-model.trim="payload.userName" class="input input-1" type="text" placeholder="您的姓名">
        </el-col>
        <el-col :span="12">
          <input v-model.trim="payload.mobile" class="input input-2" type="text" placeholder="联系方式">
        </el-col>
        <el-col :span="24">
          <button class="btn" @click="confirm">提交</button>
        </el-col>
      </el-row>
    </div>
  `,
  props: {
    url: {
      type: String,
      default: './assets/images/college-library/bg-2.png'
    }
  },
  data() {
    return {
      payload: {
        userName: '',
        mobile: ''
      }
    }
  },
  methods: {
    // 提交
    confirm() {
      if (this.payload.userName === '') {
        ELEMENT.Message.closeAll()
        ELEMENT.Message.error('请输入您的姓名')
        return
      }
      if (this.payload.mobile === '') {
        ELEMENT.Message.closeAll()
        ELEMENT.Message.error('请输入联系方式')
        return
      }
      if (!commonRegulars.mobile.test(this.payload.mobile)) {
        ELEMENT.Message.closeAll()
        ELEMENT.Message.error('请输入正确的联系方式')
        return
      }
      console.log('最终提交 --->', this.payload)
    }
  }
})


/* 立即抢占大学名额 */
Vue.component('zb-allowed', {
  template: `
    <div class="common-allowed-form" :style="{ backgroundImage: 'url(' + url + ')' }">
      <div v-if="title" class="title">{{title}}读大学-帮你轻松搞定 有疑问<span :style="{ color }">专家来解答</span></div>
      <div v-else class="title"><slot /></div>
      <div class="form-box">
        <el-form size="medium" label-width="142px">
          <el-form-item label="学生姓名：" prop="name">
            <el-input v-model.trim="payload.name"></el-input>
          </el-form-item>
          <el-form-item label="学生电话：" prop="mobile">
            <el-input v-model.trim="payload.mobile"></el-input>
          </el-form-item>
          <el-form-item label="出生年月：" prop="birthDay">
            <el-date-picker v-model.trim="payload.birthDay" style="width:100%" type="date" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-form>
        <div class="prompt" :style="{ color }">温馨提示：承诺绝不泄露您的个人信息</div>
        <div class="btn" @click="submit" :style="{ backgroundColor: color }">立即抢占大学名额</div>
      </div>
    </div>
  `,
  props: {
    title: {
      type: String,
      default: '初中生'
    },
    color: {
      type: String,
      default: '#509A16'
    },
    url: {
      type: String,
      default: './assets/images/junior-school/bg-2.png'
    }
  },
  data() {
    return {
      payload: {
        name: '',
        mobile: '',
        birthDay: '',
      }
    }
  },
  methods: {
    submit() {
      const { name, mobile, birthDay } = this.payload
      if (name === '') {
        ELEMENT.Message.closeAll()
        ELEMENT.Message.error('请输入学生姓名')
        return
      }
      if (mobile === '') {
        ELEMENT.Message.closeAll()
        ELEMENT.Message.error('请输入学生电话')
        return
      }
      if (birthDay === '') {
        ELEMENT.Message.closeAll()
        ELEMENT.Message.error('请选择出生年月')
        return
      }
      if (!commonRegulars.mobile.test(mobile)) {
        ELEMENT.Message.closeAll()
        ELEMENT.Message.error('请输入正确的电话')
        return
      }
      console.log('最后提交 ===>', this.payload)
    }
  }
})


/* 首页弹窗 */
Vue.component('zb-modal', {
  template: `
    <div v-if="visible" class="modal-container">
      <div class="bg"></div>
      <div class="modal-wrapper">
        <img @click="skip" class="modal" :src="imgUrl" alt="">
        <img src="./assets/images/index/close-btn.png" alt="" class="close" @click="close">
      </div>
    </div>
  `,
  props: {
    // 弹窗的图片地址
    imgUrl: String,
    // 跳转的链接
    url: String,
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    skip() {
      if (this.url) {
        location.href = this.url
      }
    },
    close() {
      this.visible = false
      this.$emit('input', this.visible)
    }
  },
  watch: {
    value(v) {
      this.visible = v
      if (v) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.removeAttribute('style')
      }
    }
  }
})


/* 校区优势 */
Vue.component('campus-advantage', {
  template: `
    <div>
      <zb-title title="校区优势，选择比努力更重要" top="88" bottom="76">高校教师，行业专家，现场经验与考培双重结合</zb-title>
      <div class="computer-major-3">
        <div class="left" :style="{ backgroundColor: color }">
          <img @click="prev" src="./assets/images/computer-major/a-top.png" alt="" class="btn">
          <img @click="next" src="./assets/images/computer-major/a-bot.png" alt="" class="btn">
        </div>
        <div class="right">
          <el-carousel ref="Carousel" height="423px" arrow="never" direction="vertical">
            <el-carousel-item v-for="(item,index) in data" :key="index">
              <div class="item">
                <div class="b0" :style="{ backgroundColor: color }"></div>
                <div class="b1" :style="{ backgroundColor: color }">
                  <img :src="item.photo" alt="">
                </div>
                <div class="b2">
                  <div class="line" :style="{ borderRightColor: color }"></div>
                  <div class="infos">
                    <div class="name">{{item.name}}</div>
                    <div class="info"><span :style="{ color }">学校地区：</span>辽宁省大连市</div>
                    <div class="info"><span :style="{ color }">专业设置：</span>互联网金融工业机器人</div>
                    <div class="info"><span :style="{ color }">学校优势：</span>校企合作，艺术技能+职业资格证书+就业实训三丰收校企合作，艺术技能+职业资格证书+就业实训三丰收校企合作，艺术技能+职业资格证书+就业实训三丰收</div>
                  </div>
                  <div class="btns">
                    <a :href="'schoolDetail.html?id=' + item.id" class="btn-1" :style="{
                      background: backgroundColor
                    }">了解详情</a>
                    <a @click="onlineService" class="btn-2">在线咨询</a>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  `,
  props: {
    color: {
      type: String,
      default: '#1E78FB'
    },
    data: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    backgroundColor() {
      return `linear-gradient(171deg, ${this.color}80 0%, ${this.color} 100%)`
    }
  },
  methods: {
    onlineService() {
      onlineService()
    },
    prev() {
      this.$refs.Carousel.prev()
    },
    next() {
      this.$refs.Carousel.next()
    }
  }
})